<template>
  <div class="musicbox">
    <div class="music-top">
      <my-header></my-header>
    </div>
    <div class="music-center">
      <div class="music-left">
        <my-aside></my-aside>
      </div>
      <div class="music-right">
        <keep-alive exclude="mv,musiclyrics,playlist,singer">
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
    <div class="music-bottom">
      <my-audio class="my_audio"></my-audio>
    </div>
    <transition name="fade"
      ><music-lyrics v-if="showLyrics"></music-lyrics>
    </transition>
  </div>
</template>
<script>
import MyAside from "./component/MyAside"
import MyHeader from "./component/MyHeader"
import MyAudio from "../../components/audio/MyAudio"
import MusicLyrics from "./component/MusicLyrics"
export default {
  name: "music",
  data() {
    return {
      path: "",
      showLyrics: false,
    }
  },
  components: {
    MyAside,
    MyHeader,
    MyAudio,
    MusicLyrics,
  },
  created() {
    this.$EventBus.$on("showMusicLyrics", () => {
      this.showLyrics = !this.showLyrics
    })
  },
  watch: {
    "$route.path": function(newVal, oldVal) {
      this.path = newVal
    },
  },
}
</script>
<style lang="scss" scoped>
@media (min-width: 600px) {
  .musicbox {
    width: 100%;
    height: 100vh;
    background: white;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    .music-top {
      height: 50px;
      width: 100%;
      overflow: hidden;
    }
    .music-bottom {
      height: 50px;
      width: 100%;
      // overflow: hidden;
    }
    .music-center {
      height: calc(100vh - 100px);
      width: 100%;
      background: rgb(255, 255, 255);
      display: flex;
      overflow: hidden;
      .music-left {
        width: 230px;
        // background: #dd6d60;
      }
      .music-right {
        width: calc(100% - 230px);
        height: 100%;
      }
    }
  }
  .router-link-active {
    background: white;
    // color: #dd6d60;
    color: rgb(98, 158, 218);
  }
}
@media (max-width: 600px) {
  .musicbox {
    width: 100vw;
    height: 100vh !important;
    box-sizing: border-box;
    padding-bottom: 3.75rem;
    overflow: hidden;
    background: white;
    .music-center {
      height: 100%;
      width: 100%;
      background: rgb(255, 255, 255);
      .music-left {
        display: block;
      }
      .music-right {
        width: 100%;
        height: calc(100% - 1.7rem);
      }
    }
    .music-bottom {
      opacity: 0;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: all 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(100%);
}
</style>
